import React, { useEffect, useState } from "react";
import {
    Button,
    Form,
    Input,
    Card,
    DatePicker,
    Select,
    Table,
    Tag,
    message,
} from "antd";
import {
    SearchOutlined,
    ArrowDownOutlined,
    ArrowUpOutlined,
    EditOutlined,
} from "@ant-design/icons";
import OaPagination from "@/components/OaPagination";
import OaBreadcrumb from "@/components/OaBreadcrumb";
import { getStaffListApi } from "@/api/staff";

const { Option } = Select;

const { RangePicker } = DatePicker;
const dateFormat = "YYYY/MM/DD";

const columns = [
    {
        title: "序号",
        render: (text, record, index) => `${index + 1}`,
    },
    {
        title: "姓名",
        dataIndex: "realname",
    },
    {
        title: "邮箱",
        dataIndex: "email",
    },
    {
        title: "入职时间",
        dataIndex: "date_joined",
    },

    {
        title: "部门",
        dataIndex: "staffs_department",
        render: (record) => (record ? record.name : ""),
    },

    {
        title: "审核状态",
        key: "action",
        render: (record) => {
            let color;
            let text;

            switch (record.status) {
                case 0:
                    color = "gold"; // 未激活
                    text = "未激活";
                    break;
                case 1:
                    color = "green"; // 已激活
                    text = "已激活";
                    break;
                case 2:
                    color = "red"; // 已锁定
                    text = "已锁定";
                    break;
                default:
                    color = "default";
                    text = "未知状态";
            }
            return <Tag color={color}>{text}</Tag>;
        },
    },
    {
        title: "操作",
        key: "action",
        render: (_, record) => (
            <Button type="primary" icon={<EditOutlined />}></Button>
        ),
    },
];

export default function ListStaff() {
    const [form] = Form.useForm();
    let [staffList, setStaffList] = useState([]),
        [total, setTotal] = useState(0),
        [pages, setPages] = useState(5),
        [page, setPage] = useState(1),
        [searchParams, setSearchParams] = useState({ date_joined: '', realname: '', department_id: null }),
        [flag, setFlag] = useState(false);

    useEffect(() => {
        const getStaffList = async () => {
            const res = await getStaffListApi({ page: page, pageSize: pages });
            console.log(res);
            if (res.code === 200) {
                setStaffList(res.data.items);
                setTotal(res.data.total);
                setPages(res.data.pageSize);
            } else {
                message.error("获取员工失败！");
            }
        };

        getStaffList();
    }, [flag, pages, page]);

    const searchStaff = ()=>{
        
    }

    const changePage = (page) => {
        setPage(page);
        setFlag(!flag);
    };

    const changePageSize = (pageSize) => {
        setPages(pageSize);
        setFlag(!flag);
    };

    return (
        <>
            <OaBreadcrumb></OaBreadcrumb>
            <Card>
                <Form layout="inline" form={form} initialValues={{ remember: true }}>
                    <Form.Item label="按部门" name="department">
                        <Select placeholder="请选择">
                            <Option value="male">Male</Option>
                            <Option value="female">Female</Option>
                            <Option value="other">Other</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="按姓名">
                        <Input />
                    </Form.Item>
                    <Form.Item label="按入职时间">
                        <RangePicker format={dateFormat} />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" icon={<SearchOutlined />} onClick={searchStaff}></Button>
                    </Form.Item>
                    <Form.Item>

                        <Button type="primary" danger icon={<ArrowDownOutlined />}>
                            下载
                        </Button>
                    </Form.Item>
                    <Form.Item>

                        <Button type="primary" danger icon={<ArrowUpOutlined />}>
                            上传
                        </Button>
                    </Form.Item>
                </Form>
            </Card>

            <Card style={{ marginTop: "20px" }}>
                <Table
                    columns={columns}
                    dataSource={staffList}
                    rowKey="id"
                    pagination={false}
                    bordered
                />
                <OaPagination
                    total={total}
                    pages={pages}
                    changePage={changePage}
                    changePageSize={changePageSize}
                ></OaPagination>
            </Card>
        </>
    );
}
